<template>
  <div v-for="(item, index) in datas" :key="index" :class="type, {active:item.type === 1}" class="list-item">
    <div class="infos">
      <div :title="item.title" class="title">
        <div class="text">{{ item.title }}</div>
      </div>
      <div v-if="item.info1" class="info-1">
        {{ item.info1 }}
      </div>
      <div v-if="item.info2" :title="item.info2" class="info-2">
        {{ item.info2 }}
      </div>
      <div class="date">
        {{ item.date }}
      </div>
    </div>
    <!--    <div-->
    <!--      class="image"-->
    <!--      :style="{ backgroundImage: `url(${item.image})` }"-->
    <!--      @click="$emit('preview', item)"-->
    <!--    />-->
    <iframe v-if="iframe"
            :src="item.image"
            class="image iframe"
            @click="$emit('preview', item)"
    />
    <div v-else class="imageBox">
      <img
          :src="item.image"
          class="image"
          @click="$emit('preview', item)"
      />
    </div>

    <!--      :style="{ backgroundImage: `url(${item.image})` }"-->

  </div>
</template>

<script setup>
// eslint-disable-next-line no-undef
defineProps({
  type: {
    type: String,
    default: "camera",
  },
  datas: {
    type: Array,
    default: () => [],
  },
  iframe: {
    type: Boolean,
    default: false,
  },

});

// eslint-disable-next-line no-undef
defineEmits(["preview"]);
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
